<template>
  <div id="example">
    <ul class="music-title">
      <template v-for="item in computedList">
        <li v-if="item.is_show" :key="item.id" :class="{'music-list-li': item.active}"
            @click="handleClickAnimation(item, $event)">
          <el-row class="music-list">
            <el-col :span="5">
              <el-avatar :size="60">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
              </el-avatar>
            </el-col>
            <el-col :span="12" v-show="!item.active">
              <div class="music-song">
                <span>{{item.name}}</span>
                <span>{{item.singer}}</span>
              </div>
            </el-col>
            <el-col :span="7" v-show="!item.active">
              <div style="font-size: 20px;text-align: center;line-height: 60px;">3:22</div>
            </el-col>
          </el-row>
        </li>
      </template>
    </ul>
  </div>
</template>
<script>
  import Velocity from 'velocity-animate'
  import 'velocity-animate/velocity.ui.js'

  export default {
    name: 'editor',
    components: {},
    data () {
      return {
        publicPath: process.env.BASE_URL,
        dataList: [
          {
            'id': 1,
            'name': '能不能给我一首歌的时间',
            'singer': '周杰伦',
            'is_show': true,
            'active': false
          },
          {
            'id': 2,
            'name': '能不能给我一首歌的时间',
            'singer': '周杰伦',
            'is_show': true,
            'active': false
          },
          {
            'id': 3,
            'name': '能不能给我一首歌的时间',
            'singer': '周杰伦',
            'is_show': true,
            'active': false
          },
          {
            'id': 4,
            'name': '能不能给我一首歌的时间',
            'singer': '周杰伦',
            'is_show': true,
            'active': false
          },
          {
            'id': 5,
            'name': '能不能给我一首歌的时间',
            'singer': '周杰伦',
            'is_show': true,
            'active': false
          },
          {
            'id': 6,
            'name': '能不能给我一首歌的时间',
            'singer': '周杰伦',
            'is_show': true,
            'active': false
          }
        ]
      }
    },
    created () {
    },
    mounted () {
      this.mouseHover()
      this.loadAnimation()
    },
    computed: {
      computedList: function () {
        return this.dataList
      }
    },
    watch: {},

    methods: {
      // 鼠标放上去的动画
      mouseHover () {
        let length = this.dataList.length
        for (let i = 0; i < length; i++) {
          $('.music-title').eq(i).css('animationDelay', parseFloat((i + 1) / length + 0.05) + 's')
        }
      },
      // 载入动画
      loadAnimation () {
        Velocity($('.music-title li'), 'slideInLeft', { stagger: 300 })
      },
      // 点击动画
      handleClickAnimation (item, event) {
        item.active = !item.active
        Velocity(event.target, 'slideOutDown', { stagger: 100 })
        this.dataList = this.dataList.filter((val) => {
          if (item.id === val.id) {
            val.show = false
          }
          return val
        })
      }
    }
  }
</script>

<style lang="scss">
  .music-list {
    font-family: "Fredoka One", cursive;
    font-weight: 700;
    color: purple;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: -webkit-transform 1s, opacity 1s, background 1s, width 1s, height 1s, font-size 1s;
    position: absolute;
    transition-property: width, height, transform, background, font-size, opacity;
    transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
  }

  .music-list:hover {
    transform: rotate(360deg);
    opacity: 1;
    background: purple;
    font-size: 16px;
    color: #ffffff;
    border-radius: 5px;
    padding: 15px;
    margin: 5px;
  }
  .music-list-li{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 0;
    animation: bounce 2s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
  }
  @keyframes bounce {
    0% {
      transform: translate3d(0, 0, 0);
      text-shadow: rgba(128, 0, 128, 0.4) 0 0 0.05em;
    }
    10% {
      transform: translate3d(1em, 1em, 0);
      text-shadow: rgba(128, 0, 128, 0.4) 0 0 0.05em;
    }
    20% {
      transform: translate3d(2em, 0em, 0);
      text-shadow: rgba(128, 0, 128, 0.4) 0 1em 0.35em;
    }
    100% {
      transform: translate3d(100em, 0em, 0);
      text-shadow: rgba(128, 0, 128, 0.4) 0 1em 0.35em;
    }
  }
</style>
